<template>
    <div class="remWrap">
        <dl v-for="(v,i) in list" :key="i" >
            <dt><img :src="v.url" alt=""></dt>
            <dd>
                <h4>{{v.title}}</h4>
                <p>{{v.detail}}</p>
            </dd>
        </dl>
        <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data(){
        return{
            list:[],
            total:0
        }
    },
    methods:{
        async http(pageIndex=0,pageSize=5){
            const res= await axios.get('/api/getlist',{
                params:{
                    pageIndex,
                    pageSize
                }
            })
            console.log(res.data)
            this.list=res.data.data
            this.total=res.data.total
        },
        handleCurrentChange(index){
            this.http(index)
        }
    },
    created(){
        this.http()
    }
}
</script>

<style lang='scss'>
    .remWrap{
        width: 100%;
        dl{
            width: 100%;
            height: 100px;
            display:flex;
            padding: 0 10px;
            margin: 5px 0;
            dt{
                margin-right: 10px;
            }
            img{
                border-radius: 10px;
            }
        }
    }
</style>